<template>
	<view class="container container15293">
		<view class="flex flex-wrap diygw-col-24 flex-direction-column justify-center items-center flex-clz">
			<image src="/static/tx-nxs4.png" class="diygw-image diygw-col-0 image-clz" style="height: 80px !important; width: 80px" mode="widthFix"></image>
		</view>
		<u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef" class="flex diygw-form diygw-col-24">
			<u-form-item class="diygw-col-24 username-clz radius" labelPosition="top" prop="username">
				<u-input :focus="formData.usernameFocus" class="" placeholder="手机号" v-model="form.username" type="text"></u-input>
			</u-form-item>
			<u-form-item class="diygw-col-24 password-clz radius" labelPosition="top" prop="password">
				<u-input :focus="formData.passwordFocus" class="" placeholder="密码" v-model="form.password" type="password" :password-icon="true"></u-input>
			</u-form-item>
			<view class="flex diygw-col-24 flex-direction-column justify-center button-clz radius">
				<button @tap="navigateTo" data-type="loginBnApi" class="diygw-btn black radius button-button-clz">登录</button>
			</view>
		</u-form>
		<view class="flex flex-wrap diygw-col-24 justify-center items-center flex1-clz">
			<view @tap="navigateTo" data-type="page" data-url="/pages/index" class="diygw-col-0 diygw-text-md"> 首页 </view>
			<view class="diygw-col-0 text3-clz diygw-text-md"> | </view>
			<view @tap="navigateTo" data-type="page" data-url="/pages/index" class="diygw-col-0 diygw-text-md"> 返回 </view>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
				loginBn: {
					code: 500,
					msg: '用户名或密码错误'
				},
				formRules: {
					username: [
						{
							trigger: ['change', 'blur'],
							required: true,
							message: '账户不能为空'
						}
					]
				},
				form: {
					username: '',
					password: ''
				},
				formData: {
					usernameFocus: false,
					passwordFocus: false
				}
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		onReady() {
			this.$refs.formRef?.setRules(this.formRules);
		},
		methods: {
			async init() {},
			// 登陆 API请求方法
			async loginBnApi(param) {
				let thiz = this;
				param = param || {};
				//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
				let http_url = '/bn/api.user/loginBn';
				let http_data = {
					username: this.form.username,
					password: this.form.password
				};
				let http_header = {};

				let loginBn = await this.$http.post(http_url, http_data, http_header, 'json');

				this.loginBn = loginBn;
				console.log('把登陆之后的用户信息写到session');
				this.$session.setUser(loginBn.data);

				console.log(loginBn.code);
				if (loginBn.code == 200) {
					console.log('登录成功');
					this.$session.setUser(loginBn.data);
					this.navigateTo({
						type: 'page',
						url: 'personal'
					});
				} else {
					let flag = await this.showModal(loginBn.msg);
				}
			},

			// 用户登陆成功转向 自定义方法
			async loginFunction(param) {
				let thiz = this;
				console.log(param.code);
				if (param.code === 200) {
					console.log('登录成功');
					this.$session.setUser(param.data);
					this.navigateTo.setUser({
						type: 'page',
						url: 'index'
					});
				} else {
					let flag = await this.showModal('登录失败,请核对账号密码是否有误?');
				}
			},
			async submitForm(e) {
				let valid = await this.$refs.formRef.validate();
				if (valid) {
					//保存数据
					let param = this.form;
					let url = '';
					if (!url) {
						this.showToast('请先配置表单提交地址', 'none');
						return false;
					}

					let res = await this.$http.post(url, param, {}, 'json');

					if (res.code == 200) {
						this.showToast(res.msg, 'success');
					} else {
						this.showModal(res.msg, '提示', false);
					}
				} else {
					console.log('验证失败');
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.flex-clz {
		z-index: 100;
		height: 180px;
	}
	.image-clz {
		border-bottom-left-radius: 50%;
		box-shadow: 0px 0px 30px rgba(31, 31, 31, 0.16);
		overflow: hidden;
		border-top-left-radius: 50%;
		border-top-right-radius: 50%;
		border-bottom-right-radius: 50%;
	}
	.username-clz {
		margin-left: 20px;
		box-shadow: 0px 0px 30px rgba(31, 31, 31, 0.16);
		overflow: hidden;
		width: calc(100% - 20px - 20px) !important;
		font-size: 16px !important;
		margin-top: 10px;
		margin-bottom: 10px;
		margin-right: 20px;
	}
	.password-clz {
		margin-left: 20px;
		box-shadow: 0px 0px 30px rgba(31, 31, 31, 0.16);
		overflow: hidden;
		width: calc(100% - 20px - 20px) !important;
		font-size: 16px !important;
		margin-top: 20px;
		margin-bottom: 10px;
		margin-right: 20px;
	}
	.button-clz {
		margin-left: 20px;
		box-shadow: 0px 0px 30px rgba(31, 31, 31, 0.16);
		overflow: hidden;
		width: calc(100% - 20px - 20px) !important;
		font-size: 16px !important;
		margin-top: 20px;
		margin-bottom: 10px;
		margin-right: 20px;
	}
	.button-button-clz {
		font-size: 17px !important;
		margin: 0px !important;
		padding: 24px !important;
	}
	.flex1-clz {
		margin-left: 5px;
		z-index: 100;
		color: rgba(0, 0, 0, 0.71);
		width: calc(100% - 5px - 5px) !important;
		margin-top: 15px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.text3-clz {
		margin-left: 5px;
		margin-top: 0px;
		margin-bottom: 0px;
		margin-right: 5px;
	}
	.container15293 {
		padding-left: 0px;
		padding-right: 0px;

		font-size: 12px;
	}
	.container15293 {
	}
</style>
